<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Animated Login & Registration Form</title>
	<link rel="stylesheet" type="text/css" href="./style/style.css">
	<link rel="stylesheet" href="./style/toast.css">
</head>

<body>
	<div class="container">
		<span></span>
		<span></span>
		<span></span>
		<form id="signinForm">
			<h2>Login</h2>
			<div class="inputBox">
				<input type="text" placeholder="Username">
			</div>
			<div class="inputBox">
				<input type="password" placeholder="Password">
			</div>
			<div class="inputBox group">
				<a href="#">Forgot Password</a>
				<a href="#" id="signup">Signup</a>
			</div>
			<div class="inputBox">
				<input type="submit" value="Sign in">
			</div>
		</form>

		<form id="signupForm">
			<h2>Registration</h2>
			<div class="inputBox">
				<input type="text" placeholder="Username">
			</div>
			<div class="inputBox">
				<input type="text" placeholder="Nickname">
			</div>
			<div class="inputBox">
				<input type="password" placeholder="Create Password">
			</div>
			<div class="inputBox">
				<input type="password" placeholder="Confirm Password">
			</div>
			<div class="inputBox">
				<input type="submit" value="Register Account">
			</div>
			<div class="inputBox group">
				<a href="#">Already Have an Account ? <b id="signin">Login</b></a>
			</div>
		</form>
	</div>

	<script src="../lodash.min.js"></script>
	<script type="module">
		import { login, register } from './js/api.js';
		import toast from './utils/toast.js';

		const $ = (selector, parent = document) => parent.querySelector(selector);

		$('#signup').onclick = () => document.body.classList.add('signup');
		$('#signin').onclick = () => document.body.classList.remove('signup');

		$('#signinForm').addEventListener('submit', async function (e) {
			e.preventDefault();
			const form = this;
			const submitBtn = $('input[type="submit"]', form);

			if (submitBtn.disabled) return;
			submitBtn.disabled = true;
			submitBtn.value = '登录中...';

			const data = {
				username: $('[placeholder="Username"]', form).value.trim(),
				password: $('[placeholder="Password"]', form).value.trim()
			};

			if (!data.username || !data.password) {
				toast.error('用户名和密码不能为空');
				submitBtn.disabled = false;
				submitBtn.value = 'Sign in';
				return;
			}

			try {
				const res = await login(data);
				if (res.code === 1) {
					toast.success(res.message);
					localStorage.setItem('token', res.token);
					sessionStorage.setItem('user', JSON.stringify(res.user));
					window.location.href = './index.html';
				} else {
					toast.error(res.message);
				}
			} catch (err) {
				toast.error(err.message || '登录失败');
			} finally {
				submitBtn.disabled = false;
				submitBtn.value = 'Sign in';
			}
		});

		$('#signupForm').addEventListener('submit', async function (e) {
			e.preventDefault();
			const form = this;
			const submitBtn = $('input[type="submit"]', form);

			if (submitBtn.disabled) return;
			submitBtn.disabled = true;
			submitBtn.value = '注册中...';

			const data = {
				username: $('[placeholder="Username"]', form).value.trim(),
				nickname: $('[placeholder="Nickname"]', form).value.trim(),
				password: $('[placeholder="Create Password"]', form).value.trim(),
				rpassword: $('[placeholder="Confirm Password"]', form).value.trim()
			};

			try {
				const res = await register(data);
				if (res.code === 1) {
					toast.success(res.message);
					form.reset();
					document.body.classList.remove('signup');
				} else {
					toast.error(res.message);
				}
			} catch (err) {
				toast.error(err.message || '注册失败');
			} finally {
				submitBtn.disabled = false;
				submitBtn.value = 'Register Account';
			}
		});
	</script>
	</script>
</body>

</html>